<template>
  <div v-loading="loading" class="simple-table-view">
    <el-table
      :data="dataSource"
      width="100%"
    >
      <el-table-column
        v-for="column in dataColumn"
        :key="column.key"
        :class-name="'td-'+column.key"
        :label-class-name="'label-'+column.key"
        :label="column.label"
        :width="column.width"
      >
        <template slot-scope="scope">
          <template v-if="$scopedSlots[column.key]">
            <slot
              :name="column.key"
              v-bind="scope"
            />
          </template>
          <template v-else>
            <div v-if="typeof scope.row[column.key] === 'undefined' || scope.row[column.key] === null" class="cell-item">--</div>
            <div v-else class="cell-item">{{ scope.row[column.key] }}</div>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- current-page	当前页数。从1开始 -->
    <!-- page-size 每页显示条目个数 -->
    <!-- total 总条目数 -->
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="prev, pager, next, jumper, sizes"
      :total="dataTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
/**
 * 表格组件，配置即显示。
 */
export default {
  name: 'SimpleTableView',
  props: {
    /**
     * 数据是否加载中。默认为加载中
     */
    loading: {
      type: Boolean,
      default: true
    },
    /**
     * 数据源，后台返回的原始数据列表
     */
    dataSource: {
      type: Array,
      default: () => []
    },
    /**
     * 表格列配置项，每列需要显示的数据。示例：
     * [{
     *   key: '', // 键名，必填
     *   label: '', // 要显示的名字，必填
     *   renderHTML: (item, index) => '自定义显示内容' // 自定义表格列
     * }]
     */
    dataColumn: {
      type: Array,
      default: () => []
    },
    /**
     * 数据总条数
     */
    dataTotal: {
      type: Number,
      default: 0
    },
    /**
     * 是否显示分页组件。默认为true
     */
    showPagination: {
      type: Boolean,
      default: true
    },
    /**
     * 每页显示条目个数，支持 .sync 修饰符。默认每页显示10条
     */
    pageSize: {
      type: Number,
      default: 10
    },
    /**
     * 当前页数，支持 .sync 修饰符。默认第1页
     */
    currentPage: {
      type: Number,
      default: 1
    }
  },
  data() {
    const columnMap = {}
    this.dataColumn.forEach(item => {
      columnMap[item.key] = item
    })
    return {
      columnMap
    }
  },
  created() {
  },
  methods: {
    /**
     * pageSize 改变时会触发
     */
    handleSizeChange(pageSize) {
      this.$emit('onPageSizeChange', pageSize)
    },
    /**
     * current-change	currentPage 改变时会触发
     */
    handleCurrentChange(currentPage) {
      this.$emit('onPageCurrentChange', currentPage)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-pagination {
  text-align: center;
}
</style>
